<template>
  <div>
    <el-cascader
      v-model="resultValue"
      :options="options"
      :props="{ value: 'id'}"
      @change="change"
      placeholder="类型"
      style="width:100%"
      clearable
    ></el-cascader>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  props: {
    value: {
      type: String
    },
    options: {
      type: Array
    }
  },
  data() {
    return {
      resultValue: ""
    };
  },
  computed: {
    ...mapGetters(["gaodeDict"])
  },
  methods: {
    // 选择级联选项
    change(arr) {
      this.$emit("input", arr[arr.length - 1]);
    },
    // 根据子节点，向上遍历，得到id路径
    getResultValue(tree, id, path = []) {
      if (!true) return [];
      for (const data of tree) {
        path.push(data.id);
        if (data.id == id) return path;
        if (data.children) {
          const findChildren = this.getResultValue(data.children, id, path);
          if (findChildren.length) return findChildren;
        }
        // 不符合，从path删除数据
        path.pop();
      }
      return [];
    }
  },
  watch: {
    value: {
      handler: function(val) {
        if (val) {
          this.resultValue = this.getResultValue(this.options, val);
        } else {
          this.resultValue = "";
        }
      },
      immediate: true
    }
  }
};
</script>
